<template>
	<view class="search-result-container">
		<!-- 顶部搜索栏 -->
		<searchBox v-model="query" @cancel="goBack" @confirm="search"></searchBox>
		<!-- 筛选 -->
		<view class="filter-box">
			<view @tap="changeFilter('default')" :class="{ active: filter === 'default' }">综合</view>
			<view @tap="changeFilter('sales')" :class="{ active: filter === 'sales' }">销量</view>
			<view @tap="changeFilter('price')" :class="{ active: filter === 'price' }">
				价格
				<view class="arrow-box">
					<view class="arrow up" :class="{ active: isUp }"></view>
					<view class="arrow down" :class="{ active: !isUp }"></view>
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<!-- 搜索结果 -->
		<view class="result-box">
			<!-- 搜索结果 -->
			<view class="item" v-for="item in filterGoods" :key="item.goods_id" @tap="toDetail(item.goods_id)">
				<image :src="item.goods_small_logo"></image>
				<view class="right">
					<view class="title">{{item.goods_name}}</view>
					<view class="price">
						¥
						<text>{{item.goods_price}}</text>
						.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 组件
	import searchBox from '../../components/searchBox.vue';
	// key
	import {
		KEY
	} from '../../utils/keys.js';
	export default {
		components: {
			searchBox
		},
		data() {
			return {
				// 双向绑定
				query: '',
				// 页码
				pagenum: 1,
				// 页容量
				pagesize: 5,
				// 查询结果
				goods: [],
				// 是否加载中
				loading: false,
				// 筛选条件
				filter: 'default',
				// 箭头朝向
				isUp: true
			};
		},
		computed: {
			filterGoods() {
				// 每次弄个新数组
				const temArr = [...this.goods];
				// 逻辑
				switch (this.filter) {
					case 'default':
						return this.goods;
					case 'sales':
						temArr.sort((a, b) => {
							return a.goods_id - b.goods_id;
						});
						return temArr;
					case 'price':
						temArr.sort((a, b) => {
							if (this.isUp) {
								return a.goods_price - b.goods_price;
							}
							return b.goods_price - a.goods_price;
						});
						return temArr;
				}
				// 返回结果
			}
		},
		onLoad(option) {
			const {
				query
			} = option;
			// 设置获取到的数据
			this.query = query;
			// 查询数据
			this.queryData()
		},
		// 触底加载
		onReachBottom() {
			// 页码累加
			this.pagenum++
			// 查询数据
			this.queryData()
		},
		methods: {
			// 去详情页面
			toDetail(goods_id) {
				uni.navigateTo({
					url: "../goodDetail/goodDetail?goods_id=" + goods_id
				})
			},
			// 切换筛选条件
			changeFilter(newFilter) {
				// 如果之前不是price
				if (this.filter === 'price' && newFilter === 'price') {
					this.isUp = !this.isUp;
				}
				// 如果之前是price
				this.filter = newFilter;
			},
			// 查询数据
			queryData() {
				if (this.loading === true) {
					return
				}
				this.loading = true
				// 数据检索
				// loading效果
				uni.showLoading({
					mask: true
				})
				// 获取数据
				this.$request({
					url: "/api/public/v1/goods/search",
					method: 'get',
					data: {
						query: this.query,
						pagenum: this.pagenum,
						pagesize: this.pagesize
					}
				}).then(res => {
					// console.log('res:',res)
					this.goods = [...this.goods, ...res.goods]
					// 关闭loading
					uni.hideLoading()
					// 关闭loading
					this.loading = false
				})
			},
			// 搜索数据
			search() {
				if (this.query === '') {
					return;
				}
				// 更新历史
				const history = uni.getStorageSync(KEY);
				// 添加并去重
				history.push(this.query);
				const set = new Set(history);
				uni.setStorageSync(KEY, [...set]);
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="less">
	.search-result-container {
		// 把定位的间隙压下去
		padding-top: 184rpx;

		.search-box {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
		}

		// 筛选区域
		.filter-box {
			display: flex;
			height: 100rpx;
			border-bottom: 1rpx solid #dddddd;
			box-sizing: border-box;
			background-color: white;
			position: fixed;
			left: 0;
			width: 100%;
			top: 102rpx;

			>view {
				flex: 1;
				text-align: center;
				line-height: 100rpx;

				&.active {
					color: #ff2d4a;
				}

				// 最后一个格子
				&:last-child {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.arrow-box {
					margin-left: 10rpx;
				}

				// 箭头
				.arrow {
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;

					&.up {
						border-bottom: 12rpx solid #cccccc;
						margin-bottom: 10rpx;

						&.active {
							border-bottom-color: #666;
						}
					}

					&.down {
						border-top: 12rpx solid #cccccc;

						&.active {
							border-top-color: #666;
						}
					}
				}
			}
		}

		// 搜索结果
		.result-box {
			.item {
				display: flex;
				padding: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.price {
						color: #ff2d4a;
						font-size: 24rpx;

						text {
							font-size: 40rpx;
						}
					}
				}
			}
		}
	}
</style>
